<template>
  <div class="merak-container-has-aside" curpagename="s5goodImportTemplateDown55352">
    <div class="merak-aside">
      <div class="cur_type_name">{{ curTypeText }}</div>
      <!--    @change="change_prop_type" -->
      <!-- <el-select style="margin-bottom: 30px" class="qf_select" v-model="type" :placeholder="$t('merak.placeholder_select')">
        <el-option v-for="item in asideOwnAllType" :key="item.value" :label="item.label" :value="item.value" />
      </el-select> -->
      <el-input
        style="margin-bottom: 15px"
        v-model="treeFilter"
        :placeholder="$t('merak.placeholder_filter')"
        @input="value => treeRef?.filter(value)"
      />
      <div class="tree-wrapper">
        <el-scrollbar>
          <el-tree
            class="merakTree"
            ref="treeRef"
            node-key="id"
            :default-expanded-keys="[asideDefaultCheckId]"
            :data="asideList"
            :class="asideDefaultCheckId.indexOf('-') != -1 ? 'merakTree' : 'merakTree noThree'"
            :props="{ children: 'childs' }"
            :highlight-current="true"
            :current-node-key="asideDefaultCheckId"
            :filter-node-method="(value, tree) => tree.label.includes(value)"
            @current-change="changeTree"
          />
        </el-scrollbar>
      </div>
    </div>
    <div class="merak-card merak-container-has-search"  v-loading="loading"   v-waterMarker="{ zIndex: 10 }">
      <div class="type_name search_bar">
        {{ curTreeCheckedTypeText }}
      </div>
      <div class="template_wrap"   >
        <div class="data_tags">
          <div class="title">
            <div class="step_1">1</div>
            <h5>
              {{ msgs.selectDataComponent }}
              <!-- 选择数据组件 -->
            </h5>
            <div class="sub_title">
              {{ msgs.selectDataComponentTip }}
              <!-- 请勾选需要在模板中导出的数据组 -->
            </div>
          </div>
          <el-scrollbar height="100%">
            <dataTags :list="tagList" :msg="msgs" @tagChange="tagChange"></dataTags>
          </el-scrollbar>
        </div>
        <div class="draggble_wrap">
          <div class="title">
            <div class="step_1">2</div>
            <h5>{{ msgs.exportProductTemplate }}</h5>
            <!-- 导出商品标准模板 -->
            <div class="sub_title">
              {{ msgs.exportProductTemplateTip }}
              <!-- 您将导出包含以下数据字段的空模板，拖动模块可以调整顺序 -->
            </div>
          </div>
          <div class="body" v-show="dragList.length">
            <el-scrollbar class="scroll_body">
              <draggable :list="dragList" @dragChange="dragChange"></draggable>
            </el-scrollbar>
            <div class="footer">
              <el-button type="primary" @click="downTemplate">{{ msgs.exportTemplate }}</el-button>
              <!-- 导出标准模版 -->
            </div>
          </div>
        </div>
        <instructionComponent :msgs="msgs"></instructionComponent>
      </div>
    
    </div>
 
  </div>
</template>
<script setup lang="ts" name="goodImportTemplateDown">
import { ref, reactive, getCurrentInstance } from "vue";
import { templateDownInit, UseAsideTreeInit, UseTagListInit, UseDraggableInit, UseInstructionInit } from "./index.ts";

const { proxy } = getCurrentInstance();

//页面初始化

const { downTemplate,loading } = templateDownInit(proxy);

//初始化左侧树组件

const {
  asideTreeComponent: asideTree,
  asideList,
  type,
  asideOwnAllType,
  curTreeCheckedTypeText,
  curTypeText,
  asideDefaultCheckId,
  changeTree,
  initTree,
  treeFilter,
  treeRef
} = UseAsideTreeInit();

//初始化数据tag列表组件
const { dataTagsComponent: dataTags, tagList, tagChange } = UseTagListInit();

//初始化右侧拖拽组件
const { draggableComponent: draggable, dragList, dragChange } = UseDraggableInit();

//使用指南组件
const { instructionComponent, msgs } = UseInstructionInit();
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>   